<template>
  <div>
    <div class="background"></div>
    <div id="login_box">
      <h2>高校档案电子信息系统</h2>
      <template v-if="flag">
        <div id="input_box">
          <input v-model="idCard" type="text" placeholder="请输入身份证号" />
        </div>
        <div class="input_box">
          <input
            v-model="password"
            type="password"
            placeholder="初始密码为身份证后六位"
          />
        </div>
        <button @click="handleLogin" class="btn">普通用户登录</button><br />
      </template>
      <template v-else>
        <div id="input_box">
          <input v-model="phone" type="text" placeholder="请输入手机号" />
        </div>
        <div class="input_box">
          <input v-model="password" type="password" placeholder="请输入密码" />
        </div>
        <button @click="handleLogin" class="btn">管理员登录</button><br />
      </template>
      <button @click="changeFlag">change</button>
    </div>
  </div>
</template>

<script>
import { validIdCard, validPhone } from "@/utils/validate";
import * as memoryUtils from "@/utils/memory";
import { setToken, getToken } from "@/utils/token";
import { userLogin } from "@/api";
export default {
  data() {
    return {
      flag: false, //false代表的是管理员登录，true代表的是普通用户登录
      idCard: "", //普通用户身份证
      phone: "", //管理员手机号
      userAcountPassword: "", //普通用户密码
      managerAcountPassword: "", //普通用户密码
      password: "", //当前输入的密码
    };
  },
  mounted() {
    this.initAcountAndPassword();
  },
  methods: {
    //切换登录类型
    changeFlag() {
      this.flag = !this.flag;
      if (this.flag) {
        //普通用户
        this.password = this.userAcountPassword;
      } else {
        this.password = this.managerAcountPassword;
      }
    },
    //用户登录
    async handleLogin() {
      let idCard = this.idCard;
      let phone = this.phone;
      let password = this.password;
      //密码为空
      if (password == null || password.length == 0) {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
        return;
      }
      //普通用户登录
      if (this.flag) {
        let resFlag = validIdCard(idCard);
        if (!resFlag) {
          //身份证格式不对
          this.$message({
            message: "身份证格式不对",
            type: "warning",
          });
          return;
        }
        //发送登录请求
        let res = await this.handleUserOrManagerLogin(
          this.idCard,
          this.password,
          0
        );
        if (res.code !== 0) {
          this.$message({
            message: res.msg,
            type: "error",
          });
          return;
        }
        let token = res.data.token;
        let isManager = res.data.isManager;
        let userInfo = res.data.userInfo;
        this.initUserInfoToState(token, isManager, userInfo);
        memoryUtils.setUserAcountNum(this.idCard);
        memoryUtils.setUserAcountPassword(this.password);
        this.$router.push({ name: "user" });
      } else {
        //管理员登录
        let resFlag = validPhone(phone);
        if (!resFlag) {
          this.$message({
            message: "手机号格式不对",
            type: "warning",
          });
          return;
        }
        let res = await this.handleUserOrManagerLogin(
          this.phone,
          this.password,
          1
        );
        if (res.code !== 0) {
          this.$message({
            message: res.msg,
            type: "error",
          });
          return;
        }
        let token = res.data.token;
        let isManager = res.data.isManager;
        let userInfo = res.data.userInfo;
        this.initUserInfoToState(token, isManager, userInfo);
        memoryUtils.setManagerAcountNum(this.phone);
        memoryUtils.setManagerAcountPassword(this.password);
        this.$router.push({ name: "manager" });
      }
    },
    //将账号密码回显
    initAcountAndPassword() {
      let userAcountNum = memoryUtils.getUserAcountNum();
      let managerAcountNum = memoryUtils.getManagerAcountNum();
      let userAcountPassword = memoryUtils.getUserAcountPassword();
      let managerAcountPassword = memoryUtils.getManagerAcountPassword();
      this.idCard = userAcountNum;
      this.userAcountPassword = userAcountPassword;
      this.phone = managerAcountNum;
      this.managerAcountPassword = managerAcountPassword;
      if (this.flag) {
        this.password = userAcountPassword;
      } else {
        this.password = managerAcountPassword;
      }
    },
    //flag为0：普通用户登录;1：管理员登录
    async handleUserOrManagerLogin(userName, password, flag) {
      const params = {
        userName,
        password,
        flag,
      };
      let res = await userLogin(params);
      return res;
    },
    initUserInfoToState(token, isManager, userInfo) {
      setToken(token); //存储token到本地
      this.$store.dispatch("user/setUserToken", token); //存储token到state
      this.$store.dispatch("user/setIsManager", isManager);
      this.$store.dispatch("user/setUserInfo", userInfo); //存储个人信息到state
    },
  },
};
</script>

<style lang="less" scoped >
// @imgName: "background27.jpg";
// body {
//   // background: url("@/assets/background27.jpg") no-repeat;
//   background: url('~@/assets/background27.jpg');
//   background-size: 100% 130%;
// }
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom right, #0b3d91, #42a5f5);
  z-index: -1;
  animation: pulse 10s ease-in-out infinite alternate;
}

#login_box {
  width: 20%;
  height: 300px;
  background-color: #00000060;
  margin: auto;
  margin-top: 10%;
  text-align: center;
  box-shadow: 0px 0px 27px 0px rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 50px 50px;
}

h2 {
  color: #ffffff90;
  margin-top: 5%;
}

#input-box {
  margin-top: 5%;
}

input {
  border: 0;
  width: 70%;
  font-size: 17px;
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #fff;
  padding: 10px 10px;
  outline: none;
  margin-top: 10px;
}

.btn {
  margin-top: 50px;
  width: 70%;
  height: 35px;
  border-radius: 20px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #7c50b1, #330867);
}
button {
  margin-top: 10px;
  width: 30%;
  height: 35px;
  border-radius: 20px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #330867, #7c50b1);
}
// button:hover {
//   background-color: #42a5f5;
// }
#sign_up {
  margin-top: 45%;
  margin-left: 60%;
}

a {
  color: #b94648;
}
</style>